import * as React from 'react'
import {BrowserRouter, Link, Route, Switch} from 'react-router-dom'
import {Capsule} from '../Capsule/Capsule'
import style from "./style.less";

export default class Open extends React.Component {

    keyref: React.RefObject<HTMLInputElement>
    containref :React.RefObject<HTMLDivElement>

    constructor(props) {
        super(props);
        this.keyref = React.createRef()
        this.containref = React.createRef()
    }

    ope(){
        this.read(this.getID())
        // add()
    }

    getID() {
        // let con:HTMLInputElement = document.querySelector('.key')
        let str:string = this.keyref.current.value
        return str
    }

    read(key: string) {
        let ids = {id : key}
        fetch('http://127.0.0.1:3280/api/get',{
            method:'post',//改成post
            mode: 'cors',//跨域
            headers: {//请求头
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: JSON.stringify(ids) //向服务器发送的数据
        }).then(res => {res.text().then(val => {
            this.add(JSON.parse(val))
        })})
    }

    add(s:any) {
        // let s:Capsule = JSON.parse(localStorage.getItem('capsule'))
        // localStorage.removeItem('capsule')
        if (this.getID() !== ""){
            if (document.querySelector('.pill' ) === null && this.getID() !== "") {
                if (s.stat === undefined){
                    if ( (Date.now() - (new Date(s.time)).getTime()) >= 0  ) {
                        // let main = document.querySelector('.main')
                        let main = this.containref.current
                        let pill = document.createElement('div')
                        pill.className = 'pill'
                        let title = document.createElement('h2')
                        title.className = 'neirong'
                        title.style.marginTop = '50px'
                        title.style.marginBottom = '30px'
                        title.innerText = s.name + ' 在 ' + s.time + ' 对你说: '
                        let div = document.createElement('div')
                        div.style.padding = '15px 20px 15px 20px'
                        div.style.border = '1px solid #ff0033'
                        let con = document.createElement('pre')
                        con.style.lineHeight = '1.8em'
                        con.innerText = s.content
                        div.appendChild(con)
                        pill.appendChild(title)
                        pill.appendChild(div)
                        main.appendChild(pill)
                    } else {
                        // let main = document.querySelector('.main')
                        let main = this.containref.current
                        let pill = document.createElement('div')
                        pill.className = 'pill'
                        let title = document.createElement('h2')
                        title.className = 'neirong'
                        title.style.marginTop = '50px'
                        title.style.marginBottom = '30px'
                        title.innerText = '这颗胶囊未到提取时间，不能打开。'
                        let p = document.createElement('p')
                        p.className = 'ddl'
                        let b = document.createElement('b')
                        p.appendChild(b)
                        b.innerText = s.time
                        let p1 = document.createElement('span')
                        p1.innerText = '打开时间在 '
                        let p2 = document.createElement('span')
                        p2.innerText = ' ，距离现在'
                        let time = document.createElement('b')
                        time.className = 'every'
                        p.appendChild(p1)
                        p.appendChild(b)
                        p.appendChild(p2)
                        this.settime(s)

                        p.appendChild(time)
                        let sec = document.createElement('span')
                        p.appendChild(sec)
                        sec.innerText = '秒'
                        this.settime(s)
                        p.style.lineHeight = '1.8em'
                        p.style.fontSize = '13px'
                        let div = document.createElement('div')
                        div.style.padding = '15px 20px 15px 20px'
                        div.style.border = '1px solid #ff0033'
                        let con = document.createElement('pre')
                        con.style.lineHeight = '1.8em'
                        con.innerText = s.name + ' 给你留的提示信息' + s.tip
                        div.appendChild(con)
                        pill.appendChild(title)
                        pill.appendChild(p)
                        pill.appendChild(div)
                        main.appendChild(pill)
                    }
                }else {
                    // let main = document.querySelector('.main')
                    let main = this.containref.current
                    let div = document.createElement('div')
                    console.log('1')
                    div.className = 'pill tips-highlight'
                    div.innerText = '没有这个胶囊Key'
                    div.style.marginTop = '45px'
                    div.style.fontSize = '13px'
                    div.style.backgroundColor = '#F5F5B5'
                    div.style.border = '1px solid #DECA7E'
                    div.style.padding = '8px'
                    div.style.width = '400px'
                    div.style.color = '#900'
                    main.appendChild(div)
                }
            }
            else {
                if (s.stat !== undefined){
                    // let main = document.querySelector('.main')
                    let main = this.containref.current
                    let pill = document.querySelector('.pill')
                    main.removeChild(pill)
                    let div = document.createElement('div')
                    console.log('1')
                    div.className = 'pill tips-highlight'
                    div.innerText = '没有这个胶囊Key'
                    div.style.marginTop = '45px'
                    div.style.fontSize = '13px'
                    div.style.backgroundColor = '#F5F5B5'
                    div.style.border = '1px solid #DECA7E'
                    div.style.padding = '8px'
                    div.style.width = '400px'
                    div.style.color = '#900'
                    main.appendChild(div)
                }
            }
        }else {
            // let main = document.querySelector('.main')
            let main = this.containref.current
            let pill = document.querySelector('.pill')
            if (pill !== null)
                main.removeChild(pill)
        }
    }

    settime(s:Capsule) {
        setInterval(() => {
            let t:number|null =  (new Date(s.time)).getTime() - Date.now()
            let time:HTMLElement = document.querySelector('.every')
            if (time === null){
                time.innerText = t.toString()
            }else {
                time.innerText = t.toString()
            }

        },1000)
    }

    render() {
        return (
            <>
                <header className={style.top}>
                    <div className={style.top_main}>
                        <Link className={style.top_img} to="/">
                            时间胶囊
                        </Link>
                        <div>
                            <Link className={style.top_back} to="/">首页</Link>
                            <Link className={style.top_put} to="/put">添加</Link>
                            <Link className={style.top_open} to="/open">打开</Link>
                        </div>
                    </div>
                </header>
                <div className={style.container} ref={this.containref}>
                    <h1 className={style.page_header}>打开胶囊</h1>
                    <div className={style.main}>
                        <label>
                            胶囊Key：
                            <input className={style.key}  name="key" ref={this.keyref} style={{width:'220px'}} type="text"/>
                            <input className={style.open} type="button" onClick={()=>this.ope()} style={{padding:'7px'}} value="打开胶囊"/></label>
                    </div>
                </div>
        </>
        )
    }
}